From: Sebastian Keller <skeller@gnome.org>
Date: Tue, 17 Mar 2026 01:51:44 +0000 (+0100)
Subject: quickSettings: Adjust menu width using contraints instead of CSS
X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~10^2^2~84
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=cec702b0cc6dce9b26840add8e8d03dbdc7a8b24;p=gnome-shell.git

quickSettings: Adjust menu width using contraints instead of CSS

The width of the overlay actor for quick settings menus was as wide as
the whole box pointer and the menus placed inside the overlay actor were
then adjusted with CSS margins to have the same width and spacing as the
other elements.

This meant that in `QuickSettingsLayout` the width of the overlay actor
would have to be dependent on the size of a parent actor rather than the
associated container. In the next commit we are however going to need to
use the correct width, so this commit changes the width of the overlay
actor to be the same as other actors in the grid.

This also avoids the need to use CSS to adjust the width and horizontal
placement.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/4136>
---

diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index 6c6f06224..d887e1032 100644
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -157,7 +157,7 @@ $quick_toggle_checked_separator_color: if(
 
   border-radius: $base_border_radius * 3;
 
-  margin: $base_padding * 2 $base_padding * 3 0;
+  margin: $base_padding * 2 0 0;
 
   .popup-menu-item > StIcon {
     -st-icon-style: symbolic;
diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index cc3157607..8a055e56b 100644
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -769,33 +769,41 @@ export const QuickSettingsMenu = class extends PopupMenu.PopupMenu {
         this.box.add_child(this._grid);
         this._grid.add_child(placeholder);
 
+        const xConstraint = new Clutter.BindConstraint({
+            coordinate: Clutter.BindCoordinate.X,
+            source: this._boxPointer,
+        });
         const yConstraint = new Clutter.BindConstraint({
             coordinate: Clutter.BindCoordinate.Y,
             source: this._boxPointer,
         });
 
         // Pick up additional spacing from any intermediate actors
-        const updateOffset = () => {
+        const updateOffset = (constraint, axis) => {
             const laters = global.compositor.get_laters();
             laters.add(Meta.LaterType.BEFORE_REDRAW, () => {
                 const offset = this._grid.apply_relative_transform_to_point(
                     this._boxPointer, new Graphene.Point3D());
-                yConstraint.offset = offset.y;
+                constraint.offset = offset[axis];
                 return GLib.SOURCE_REMOVE;
             });
         };
-        this._grid.connect('notify::y', updateOffset);
-        this.box.connect('notify::y', updateOffset);
-        this._boxPointer.bin.connect('notify::y', updateOffset);
 
+        this._grid.connect('notify::x', () => updateOffset(xConstraint, 'x'));
+        this.box.connect('notify::x', () => updateOffset(xConstraint, 'x'));
+        this._boxPointer.bin.connect('notify::x',
+            () => updateOffset(xConstraint, 'x'));
+
+        this._grid.connect('notify::y', () => updateOffset(yConstraint, 'y'));
+        this.box.connect('notify::y',  () => updateOffset(yConstraint, 'y'));
+        this._boxPointer.bin.connect('notify::y',
+            () => updateOffset(yConstraint, 'y'));
+
+        this._overlay.add_constraint(xConstraint);
         this._overlay.add_constraint(yConstraint);
-        this._overlay.add_constraint(new Clutter.BindConstraint({
-            coordinate: Clutter.BindCoordinate.X,
-            source: this._boxPointer,
-        }));
         this._overlay.add_constraint(new Clutter.BindConstraint({
             coordinate: Clutter.BindCoordinate.WIDTH,
-            source: this._boxPointer,
+            source: this._grid,
         }));
 
         this.actor.add_child(this._overlay);